<template>
  <div class="inventory-management">
    <!-- 页面头部 -->
    <div class="page-header">
    <h2>库存管理</h2>
      <p>管理本站点物品库存，监控存储情况和库存预警</p>
    </div>

    <!-- 站点概览卡片 -->
    <div class="station-overview">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-card class="overview-card">
            <div class="overview-item">
              <div class="overview-icon capacity">
                <el-icon><Box /></el-icon>
              </div>
              <div class="overview-content">
                <div class="overview-title">站点容量</div>
                <div class="overview-value">{{ stationInfo.capacity }}kg</div>
                <div class="overview-desc">总存储能力</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="overview-card">
            <div class="overview-item">
              <div class="overview-icon current">
                <el-icon><ScaleToOriginal /></el-icon>
              </div>
              <div class="overview-content">
                <div class="overview-title">当前库存</div>
                <div class="overview-value">{{ stationInfo.currentLoad }}kg</div>
                <div class="overview-desc">已使用存储</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="overview-card">
            <div class="overview-item">
              <div class="overview-icon utilization" :class="{ warning: utilizationRate > 80, danger: utilizationRate > 90 }">
                <el-icon><PieChart /></el-icon>
              </div>
              <div class="overview-content">
                <div class="overview-title">利用率</div>
                <div class="overview-value">{{ utilizationRate.toFixed(1) }}%</div>
                <div class="overview-desc">存储利用率</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 库存预警 -->
    <div v-if="alerts.length > 0" class="alerts-section">
      <h3>库存预警</h3>
      <div class="alerts-list">
        <el-alert
          v-for="alert in alerts"
          :key="alert.id"
          :title="alert.title"
          :description="alert.description"
          :type="alert.type"
          show-icon
          style="margin-bottom: 8px"
        />
      </div>
    </div>

    <!-- 操作栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <el-button type="primary" icon="Plus" @click="handleAddInventory">
          添加库存
        </el-button>
        <el-button type="success" icon="Refresh" @click="handleRefresh">
          刷新数据
        </el-button>
        <el-button type="warning" icon="Warning" @click="handleCheckAlerts">
          检查预警
        </el-button>
      </div>
      <div class="toolbar-right">
        <el-select 
          v-model="filters.category" 
          placeholder="物品分类"
          clearable
          style="width: 150px"
          @change="loadInventory"
        >
          <el-option label="纸类" value="纸类" />
          <el-option label="塑料" value="塑料" />
          <el-option label="金属" value="金属" />
          <el-option label="玻璃" value="玻璃" />
          <el-option label="纺织品" value="纺织品" />
          <el-option label="有害垃圾" value="有害垃圾" />
        </el-select>
        <el-input 
          v-model="filters.keyword" 
          placeholder="搜索物品名称"
          clearable
          style="width: 200px; margin-left: 12px"
          @input="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <!-- 库存列表 -->
    <el-card class="table-card">
      <el-table 
        v-loading="loading" 
        :data="inventoryList" 
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="itemName" label="物品名称" min-width="140" />
        <el-table-column prop="category" label="分类" width="110" />
        <el-table-column prop="unit" label="单位" width="80" align="center" />
        <el-table-column prop="quantity" label="当前库存" width="130">
          <template #default="{ row }">
            <span :class="{ 'low-stock': row.quantity < row.minStock, 'high-stock': row.quantity > row.maxStock }">
              {{ row.quantity }} {{ row.unit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="minStock" label="最低库存" width="110">
          <template #default="{ row }">
            {{ row.minStock }} {{ row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="maxStock" label="最高库存" width="110">
          <template #default="{ row }">
            {{ row.maxStock }} {{ row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="averagePrice" label="平均单价" width="110" align="right">
          <template #default="{ row }">
            ¥{{ row.averagePrice.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="totalValue" label="库存价值" width="130" align="right">
          <template #default="{ row }">
            <span class="value">¥{{ (row.quantity * row.averagePrice).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="110" align="center">
          <template #default="{ row }">
            <el-tag 
              :type="getStockStatusType(row)" 
              size="small"
            >
              {{ getStockStatusText(row) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="230" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link size="small" @click="handleAdjust(row)">
              调整
            </el-button>
            <el-button type="success" link size="small" @click="handleAdd(row)">
              入库
            </el-button>
            <el-button type="warning" link size="small" @click="handleRemove(row)">
              出库
            </el-button>
            <el-button type="info" link size="small" @click="handleHistory(row)">
              历史
            </el-button>
            <el-button type="danger" link size="small" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 库存调整对话框 -->
    <el-dialog 
      v-model="adjustDialogVisible" 
      title="库存调整"
      width="500px"
    >
      <el-form ref="adjustFormRef" :model="adjustForm" :rules="adjustRules" label-width="100px">
        <el-form-item label="物品名称">
          <span>{{ selectedItem?.itemName }}</span>
        </el-form-item>
        <el-form-item label="当前库存">
          <span>{{ selectedItem?.quantity }} {{ selectedItem?.unit }}</span>
        </el-form-item>
        <el-form-item label="调整类型" prop="type">
          <el-radio-group v-model="adjustForm.type">
            <el-radio value="add">增加库存</el-radio>
            <el-radio value="reduce">减少库存</el-radio>
            <el-radio value="set">设置库存</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="调整数量" prop="quantity">
          <el-input-number 
            v-model="adjustForm.quantity" 
            :min="0" 
            :precision="2"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item v-if="adjustForm.type !== 'set'" label="调整后">
          <span>{{ calculateNewQuantity() }} {{ selectedItem?.unit }}</span>
        </el-form-item>
        <el-form-item label="调整原因" prop="reason">
          <el-input
            v-model="adjustForm.reason"
            type="textarea"
            :rows="3"
            placeholder="请输入调整原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="adjustDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="submitAdjust">
          确认调整
        </el-button>
      </template>
    </el-dialog>

    <!-- 库存历史对话框 -->
    <el-dialog 
      v-model="historyDialogVisible" 
      title="库存变动历史"
      width="1100px"
    >
      <el-table :data="inventoryHistory" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="170">
          <template #default="{ row }">
            {{ formatDateTime(row.date) }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="操作类型" width="110" align="center">
          <template #default="{ row }">
            <el-tag :type="getHistoryType(row.type)" size="small">
              {{ getHistoryText(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="beforeQuantity" label="调整前" width="110" align="right">
          <template #default="{ row }">
            {{ row.beforeQuantity }} {{ row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="changeQuantity" label="变动数量" width="120" align="right">
          <template #default="{ row }">
            <span :class="{ 'increase': row.changeQuantity > 0, 'decrease': row.changeQuantity < 0 }">
              {{ row.changeQuantity > 0 ? '+' : '' }}{{ row.changeQuantity }} {{ row.unit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="afterQuantity" label="调整后" width="110" align="right">
          <template #default="{ row }">
            {{ row.afterQuantity }} {{ row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="原因" width="300" show-overflow-tooltip />
        <el-table-column prop="operator" label="操作员" width="120" align="center" />
      </el-table>
    </el-dialog>

    <!-- 添加库存对话框 -->
    <el-dialog 
      v-model="addInventoryDialogVisible" 
      title="添加库存物品"
      width="600px"
    >
      <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="100px">
        <el-form-item label="选择物品" prop="itemId">
          <el-select 
            v-model="addForm.itemId" 
            placeholder="请选择物品"
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="item in availableItems"
              :key="item.id"
              :label="`${item.name} (${item.category})`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="初始库存" prop="quantity">
          <el-input-number 
            v-model="addForm.quantity" 
            :min="0" 
            :precision="2"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="最低库存" prop="minStock">
          <el-input-number 
            v-model="addForm.minStock" 
            :min="0" 
            :precision="2"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="最高库存" prop="maxStock">
          <el-input-number 
            v-model="addForm.maxStock" 
            :min="0" 
            :precision="2"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="addForm.notes"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addInventoryDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="submitAdd">
          添加
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { stationsAPI, itemsAPI } from '@/api'
import { useStore } from 'vuex'

const store = useStore()

// 定义组件名称用于调试
defineOptions({
  name: 'InventoryManagement'
})

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const inventoryList = ref([])
const selectedRows = ref([])
const selectedItem = ref(null)
const availableItems = ref([])
const inventoryHistory = ref([])

// 对话框控制
const adjustDialogVisible = ref(false)
const historyDialogVisible = ref(false)
const addInventoryDialogVisible = ref(false)

// 表单引用
const adjustFormRef = ref(null)
const addFormRef = ref(null)

// 站点信息（初始化为空，从API加载）
const stationInfo = reactive({
  capacity: 0,
  currentLoad: 0,
  name: '加载中...'
})

// 预警信息
const alerts = ref([])

// 筛选条件
const filters = reactive({
  category: null,
  keyword: ''
})

// 分页数据
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})

// 调整表单
const adjustForm = reactive({
  type: 'add',
  quantity: 0,
  reason: ''
})

// 添加表单
const addForm = reactive({
  itemId: null,
  quantity: 0,
  minStock: 0,
  maxStock: 100,
  notes: ''
})

// 表单验证规则
const adjustRules = {
  type: [
    { required: true, message: '请选择调整类型', trigger: 'change' }
  ],
  quantity: [
    { required: true, message: '请输入调整数量', trigger: 'blur' },
    { type: 'number', min: 0, message: '数量不能为负数', trigger: 'blur' }
  ],
  reason: [
    { required: true, message: '请输入调整原因', trigger: 'blur' }
  ]
}

const addRules = {
  itemId: [
    { required: true, message: '请选择物品', trigger: 'change' }
  ],
  quantity: [
    { required: true, message: '请输入初始库存', trigger: 'blur' },
    { type: 'number', min: 0, message: '数量不能为负数', trigger: 'blur' }
  ],
  minStock: [
    { required: true, message: '请输入最低库存', trigger: 'blur' },
    { type: 'number', min: 0, message: '数量不能为负数', trigger: 'blur' }
  ],
  maxStock: [
    { required: true, message: '请输入最高库存', trigger: 'blur' },
    { type: 'number', min: 0, message: '数量不能为负数', trigger: 'blur' }
  ]
}

// 计算属性
const utilizationRate = computed(() => {
  return (stationInfo.currentLoad / stationInfo.capacity) * 100
})

// 方法
const loadInventory = async (forceRefresh = false) => {
  loading.value = true
  try {
    const stationId = store.state.currentStation?.id || 1
    const params = {
      page: pagination.page,
      pageSize: pagination.pageSize,
      category: filters.category || undefined,
      keyword: filters.keyword || undefined
    }
    
    // 强制刷新时添加时间戳防止任何缓存
    if (forceRefresh) {
      params._t = Date.now()
    }
    
    const response = await stationsAPI.getStationInventory(stationId, params)
    
    // 确保数据是响应式更新的
    inventoryList.value = [...(response.list || response || [])]
    pagination.total = response.total || inventoryList.value.length
  } catch (error) {
    console.error('加载库存数据失败:', error)
    ElMessage.error('加载库存数据失败')
    inventoryList.value = []
  } finally {
    loading.value = false
  }
}

const loadStationInfo = async () => {
  try {
    const stationId = store.state.currentStation?.id || 1
    const response = await stationsAPI.getStationById(stationId)
    
    // 强制更新站点信息
    stationInfo.capacity = response.capacity || 2000
    stationInfo.currentLoad = response.currentLoad || 0
    stationInfo.name = response.name || '未知站点'
  } catch (error) {
    console.error('加载站点信息失败:', error)
  }
}

const loadAvailableItems = async () => {
  try {
    const response = await itemsAPI.getItems({ status: 'active' })
    availableItems.value = response.list || response
  } catch (error) {
    console.error('加载可用物品失败:', error)
  }
}

const checkAlerts = () => {
  alerts.value = []
  
  // 检查容量预警
  if (utilizationRate.value > 90) {
    alerts.value.push({
      id: 'capacity-danger',
      title: '容量严重超载',
      description: `当前库存利用率为 ${utilizationRate.value.toFixed(1)}%，已超过安全阈值`,
      type: 'error'
    })
  } else if (utilizationRate.value > 80) {
    alerts.value.push({
      id: 'capacity-warning',
      title: '容量接近上限',
      description: `当前库存利用率为 ${utilizationRate.value.toFixed(1)}%，建议及时清理`,
      type: 'warning'
    })
  }
  
  // 检查库存预警
  inventoryList.value.forEach(item => {
    if (item.quantity < item.minStock) {
      alerts.value.push({
        id: `low-stock-${item.id}`,
        title: `${item.itemName} 库存不足`,
        description: `当前库存 ${item.quantity}${item.unit}，低于最低库存 ${item.minStock}${item.unit}`,
        type: 'error'
      })
    } else if (item.quantity > item.maxStock) {
      alerts.value.push({
        id: `high-stock-${item.id}`,
        title: `${item.itemName} 库存过多`,
        description: `当前库存 ${item.quantity}${item.unit}，超过最高库存 ${item.maxStock}${item.unit}`,
        type: 'warning'
      })
    }
  })
}

const handleSearch = () => {
  pagination.page = 1
  loadInventory()
}

const handleRefresh = () => {
  loadInventory(true) // 强制刷新
  loadStationInfo()
  checkAlerts()
}

const handleCheckAlerts = () => {
  checkAlerts()
  ElMessage.success(`检查完成，发现 ${alerts.value.length} 个预警`)
}

const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.page = 1
  loadInventory()
}

const handleCurrentChange = (page) => {
  pagination.page = page
  loadInventory()
}

const handleAdjust = (row) => {
  selectedItem.value = row
  adjustForm.type = 'add'
  adjustForm.quantity = 0
  adjustForm.reason = ''
  adjustDialogVisible.value = true
}

const handleAdd = (row) => {
  selectedItem.value = row
  adjustForm.type = 'add'
  adjustForm.quantity = 0
  adjustForm.reason = '手动入库'
  adjustDialogVisible.value = true
}

const handleRemove = (row) => {
  selectedItem.value = row
  adjustForm.type = 'reduce'
  adjustForm.quantity = 0
  adjustForm.reason = '手动出库'
  adjustDialogVisible.value = true
}

const handleHistory = async (row) => {
  selectedItem.value = row
  
  try {
    const stationId = store.state.currentStation?.id || 1
    const response = await stationsAPI.getInventoryHistory(stationId, row.itemId)
    
    // 处理响应数据
    const historyData = response.data || response || []
    
    // 确保每条记录都有unit字段
    inventoryHistory.value = historyData.map(item => ({
      ...item,
      unit: item.unit || row.unit
    }))
    
    if (inventoryHistory.value.length === 0) {
      ElMessage.info('暂无历史记录')
    }
    
    historyDialogVisible.value = true
  } catch (error) {
    console.error('获取历史记录失败:', error)
    ElMessage.error('获取历史记录失败')
  }
}

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除"${row.itemName}"的库存记录吗？删除后将无法恢复。`,
      '删除库存',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const stationId = store.state.currentStation?.id || 1
    await stationsAPI.deleteStationInventory(stationId, row.itemId)
    
    ElMessage.success('库存删除成功')
    loadInventory()
    loadStationInfo()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除库存失败:', error)
      ElMessage.error('删除库存失败')
    }
  }
}

const handleAddInventory = () => {
  addForm.itemId = null
  addForm.quantity = 0
  addForm.minStock = 0
  addForm.maxStock = 100
  addForm.notes = ''
  addInventoryDialogVisible.value = true
}

const calculateNewQuantity = () => {
  if (!selectedItem.value) return 0
  
  switch (adjustForm.type) {
    case 'add':
      return selectedItem.value.quantity + adjustForm.quantity
    case 'reduce':
      return Math.max(0, selectedItem.value.quantity - adjustForm.quantity)
    case 'set':
      return adjustForm.quantity
    default:
      return selectedItem.value.quantity
  }
}

const submitAdjust = async () => {
  if (!adjustFormRef.value) return
  
  try {
    await adjustFormRef.value.validate()
    submitting.value = true
    
    const stationId = store.state.currentStation?.id || 1
    await stationsAPI.updateStationInventory(stationId, {
      itemId: selectedItem.value.itemId,
      type: adjustForm.type,
      quantity: adjustForm.quantity,
      reason: adjustForm.reason
    })
    
    ElMessage.success('库存调整成功')
    adjustDialogVisible.value = false
    loadInventory()
    loadStationInfo()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('库存调整失败')
    }
  } finally {
    submitting.value = false
  }
}

const submitAdd = async () => {
  if (!addFormRef.value) return
  
  try {
    await addFormRef.value.validate()
    submitting.value = true
    
    const stationId = store.state.currentStation?.id || 1
    await stationsAPI.updateStationInventory(stationId, {
      itemId: addForm.itemId,
      quantity: addForm.quantity,
      minStock: addForm.minStock,
      maxStock: addForm.maxStock,
      notes: addForm.notes
    })
    
    ElMessage.success('添加库存成功')
    addInventoryDialogVisible.value = false
    loadInventory()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('添加库存失败')
    }
  } finally {
    submitting.value = false
  }
}

const getStockStatusType = (row) => {
  if (row.quantity < row.minStock) return 'danger'
  if (row.quantity > row.maxStock) return 'warning'
  return 'success'
}

const getStockStatusText = (row) => {
  if (row.quantity < row.minStock) return '库存不足'
  if (row.quantity > row.maxStock) return '库存过多'
  return '正常'
}

const getHistoryType = (type) => {
  const types = {
    add: 'success',      // 增加库存
    reduce: 'warning',   // 减少库存
    set: 'info',         // 设置库存
    in: 'success',       // 入库
    out: 'warning',      // 出库
    adjust: 'info'       // 调整
  }
  return types[type] || 'info'
}

const getHistoryText = (type) => {
  const texts = {
    add: '入库',
    reduce: '出库',
    set: '设置库存',
    in: '入库',
    out: '出库',
    adjust: '调整'
  }
  return texts[type] || type || '未知'
}

const formatDateTime = (datetime) => {
  if (!datetime) return ''
  return new Date(datetime).toLocaleString('zh-CN')
}

// 等待站点信息加载完成
const waitForStation = () => {
  return new Promise((resolve, reject) => {
    const maxWaitTime = 5000 // 最多等待5秒
    const startTime = Date.now()
    
    const checkStation = () => {
      if (store.state.currentStation && store.state.currentStation.id) {
        resolve(store.state.currentStation.id)
      } else if (Date.now() - startTime > maxWaitTime) {
        // 尝试从 localStorage 获取上次的站点ID
        const savedStationId = localStorage.getItem('currentStationId')
        if (savedStationId) {
          resolve(parseInt(savedStationId))
        } else {
          ElMessage.warning('无法获取站点信息，请刷新页面')
          reject(new Error('站点信息加载超时'))
        }
      } else {
        setTimeout(checkStation, 100) // 每100ms检查一次
      }
    }
    checkStation()
  })
}

// 初始化数据
const initData = async (forceRefresh = false) => {
  // 等待站点信息加载完成
  await waitForStation()
  
  // 加载数据
  loadInventory(forceRefresh)
  loadStationInfo()
  loadAvailableItems()
  
  // 延迟检查预警，等数据加载完成
  setTimeout(() => {
    checkAlerts()
  }, 1000)
}

// 生命周期 - 每次组件创建时都会执行（没有 keep-alive 时每次切换都会重新创建）
onMounted(async () => {
  // 重置分页到第一页
  pagination.page = 1
  
  // 等待并强制刷新数据
  await initData(true)
})
</script>

<style scoped>
.inventory-management {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.station-overview {
  margin-bottom: 24px;
}

.overview-card {
  height: 120px;
}

.overview-item {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
}

.overview-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 28px;
  color: white;
}

.overview-icon.capacity {
  background: #409eff;
}

.overview-icon.current {
  background: #67c23a;
}

.overview-icon.utilization {
  background: #e6a23c;
}

.overview-icon.utilization.warning {
  background: #f56c6c;
}

.overview-icon.utilization.danger {
  background: #ff4d4f;
}

.overview-content {
  flex: 1;
}

.overview-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.overview-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.overview-desc {
  font-size: 12px;
  color: #999;
}

.alerts-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #fffbf0;
  border-radius: 4px;
  border-left: 4px solid #e6a23c;
}

.alerts-section h3 {
  margin: 0 0 12px 0;
  color: #e6a23c;
  font-size: 16px;
  font-weight: 600;
}

.alerts-list :deep(.el-alert) {
  border-radius: 4px;
}

.alerts-list :deep(.el-alert--warning) {
  background-color: #fff3e0 !important;
  border-color: #ffb74d !important;
}

.alerts-list :deep(.el-alert--error) {
  background-color: #ffebee !important;
  border-color: #ef5350 !important;
}

.alerts-list :deep(.el-alert--info) {
  background-color: #e3f2fd !important;
  border-color: #64b5f6 !important;
}

.alerts-list :deep(.el-alert__title) {
  color: #333 !important;
  font-weight: 600 !important;
}

.alerts-list :deep(.el-alert__description) {
  color: #666 !important;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.toolbar-left {
  display: flex;
  gap: 12px;
}

.table-card {
  margin-bottom: 24px;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.low-stock {
  color: #f56c6c;
  font-weight: 500;
}

.high-stock {
  color: #e6a23c;
  font-weight: 500;
}

.value {
  color: #67c23a;
  font-weight: 500;
}

.increase {
  color: #67c23a;
  font-weight: 500;
}

.decrease {
  color: #f56c6c;
  font-weight: 500;
}
</style>



